<template>
	<!-- 钱包 -->
  <view class="wallet">
    <!-- 钱包卡片 -->
    <view class="head_box u-flex u-row-center u-col-center">
    	<view class="card-box">
    		<view class="card-head u-flex u-col-center">
    			<view class="card-title u-m-r-10">可提现金额（元）
          <u-icon @click="showMoney = !showMoney" :name="showMoney ? 'eye-fill' : 'eye-off'" size="46"
          	color="#fff"></u-icon>
          </view>
    		</view>
    		<view class="money-num u-p-t-50">{{ showMoney ? 1111 || '0.00' : '***' }}</view>
        <view class="dongjie">冻结金额:{{0.00}}</view>
    		<button class="u-reset-button withdraw-btn"
    			@tap="recharge">充值</button>
        
    	</view>
    </view>
    <!-- 奖励 -->
    <view class="reward">
      <view class="left_group">
        <view class="">
          今日拼购奖励
        </view>
        <view class="money">
          0
          <!-- ￥{{list.return_prize}} -->
        </view>
      </view>
      <view class="left_group">
        <view class="">
          今日助力红包
        </view>
        <view class="money">
          0
          <!-- ￥{{list.direct_prize}} -->
        </view>
      </view>
      <view class="left_group">
        <view class="">
          累计助力红包
        </view>
        <view class="money">
          0
          <!-- ￥{{list.direct_all_prize}} -->
        </view>
      </view>
    </view>
    <!-- 财产明细 -->
    <view class="detailed">
      <view class="detailed-head">
        <u-tabs-swiper ref="tabs" active-color="#FA6E3F"   :list="list" :is-scroll="false"></u-tabs-swiper>
      </view>
      <view class="details" v-for="(item,wallet) in details" :key="wallet">
        <dl>
          <dt><image :src="item.img" mode=""></image></dt>
          <dd class="name">
            <text class="way">{{item.way}}</text>
            <text class="money"  :class="(item.money>0)?'color':''">{{item.money}}</text>
          </dd>
          <dd class="time">{{item.time}}</dd>
        </dl>
      </view>
    </view>
  </view>
</template>

<script>
  
  export default {
  	data() {
  		return {
        showMoney: true,
        list: [{
        					name: '全部'
        				}, {
        					name: '收入'
        				}, {
        					name: '支出',
        					
        				}],
        details:[
          {
            img:require("../../../static/images/base_avatar.png"),
            way:"买机器人",
            money:"899",
            time:"2021.9.13"
          },
          {
            img:require("../../../static/images/base_avatar.png"),
            way:"买机器人",
            money:"-199",
            time:"2021.9.13"
          },
          {
            img:require("../../../static/images/base_avatar.png"),
            way:"买机器人",
            money:"-199",
            time:"2021.9.13"
          },
        ]
  		};
  	},
  
  	onLoad() {
  		
  	},
  	mounted() {
     
  	},
  	methods: {	
       recharge(){
              uni.navigateTo({
                  url:"/pages/user/menu/recharge"
              })
          }
  	}
  };
  
  
</script>

<style lang="scss">
  // 钱包
  .head_box {
  	width: 100%;
  	background-color: #fff;
  	padding: 30rpx 0;
  
  	.card-box {
  		width: 600rpx;
      margin:0 auto;
  		min-height: 230rpx;
  		padding: 40rpx;
  		background: linear-gradient(to right, #FA6E3F, #FEAB55);
  		background-size: 100% 100%;
  		box-shadow: 1rpx 5rpx 16rpx 0 #FA6E3F;
  		border-radius: 30rpx;
  		overflow: hidden;
  		position: relative;
  
  		.card-head {
  			color: #fff;
  			font-size: 30rpx;
  		}
      .card-title{
        padding-bottom: 30rpx;
      }
      .dongjie{
        color: white;
        font-weight: 500;
        margin-top:30rpx;
      }
  		.money-num {
  			font-size: 70rpx;
  			line-height: 70rpx;
  			font-weight: 500;
  			color: #ffffff;
  		}
  
  		.reduce-num {
  			font-size: 26rpx;
  			font-weight: 400;
  			color: #ffffff;
  		}
  
  		.withdraw-btn {
  			width: 120rpx;
  			height: 60rpx;
  			line-height: 60rpx;
  			background: #ffffff;
  			border-radius: 30px;
  			font-size: 24rpx;
  			font-weight: 500;
  			color: #FA6E3F;
  			position: absolute;
  			right: 30rpx;
  			top: 40rpx;
  		}
  	}
  }
  
  // 奖励
  .reward {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      color: #fff;
      text-align: center;
      padding: 30rpx;
  
      .left_group {
        background: linear-gradient(to right, #FA6E3F, #FEAB55);
        box-shadow: 1rpx 5rpx 16rpx 0 #FA6E3F;
        border-radius: 25rpx;
        width: 32%;
        // height: 150rpx;
        padding: 30rpx 0;
  
        .money {
          font-size: 40rpx;
          margin-top: 20rpx;
        }
      }
    }
    // 收支明细
    .detailed{
      .detailed-head{
        border-bottom:2rpx solid black;
      }
      .details{
        border-bottom: 1px solid #C0C0C0;
        dl{
          overflow: hidden;
          padding:30rpx 30rpx;
          dt{
            image{
              width: 80rpx;
              height: 80rpx;
              float: left;
              padding-right:20rpx;
            }
          }
          
          .name{
            overflow: hidden;
            // font-weight: bold;
            font-size: 30rpx;
            .way{
              float: left;
            }
            .money{
              float: right;
              // color: #FA6E3F;
            }
            .color{
              color: #FA6E3F;
            }
          }
          .time{
            margin-top:10rpx;
            font-size: 24rpx;
            color: #C8C7CC;
          }
        }
      }
    }
</style>
